<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-07-01 21:43:20
 * @LastEditTime: 2024-07-02 22:54:38
 * @Description: 创建合集
-->
<template>
  <FormLayout title="创建合集">
    <div class="form-area fit overflow-hidden">
      <div class="full-w m-b-20">
        <div class="text-#1c1f23 text-14 line-height-22 m-b-8 font-400">
          合集名称
        </div>
        <el-input
          v-model="formState.title"
          placeholder="请输入"
        />
      </div>
      <div class="full-w m-b-20">
        <div class="text-#1c1f23 text-14 line-height-22 m-b-8 font-400">
          合集描述
        </div>
        <el-input
          v-model="formState.intro"
          placeholder="请输入"
        />
      </div>
      <div class="full-w m-b-20">
        <div class="text-#1c1f23 text-14 line-height-22 m-b-8 font-400">
          合集封面
        </div>
        <UpImgList
          class="w-120 h-120"
          url=""
          up-text="点击上传图片"
          img-show
          @deleteImg="setImg('')"
          @getImg="setImg"
        />
      </div>
      <div class="full-w">
        <div class="text-#1c1f23 text-14 line-height-22 m-b-8 font-400">
          关联视频
        </div>
        <div class="full-w grid gap-20 series-video-area">
          <div
            v-for="item in showList"
            :key="item.id"
            class="w-120 h-120 rd-8 relative overflow-hidden"
          >
            <img
              :src="item.cover_url"
              class="fit"
            />
            <div
              class="absolute right-0 bottom-0 full-w h-34 bg-#00000080 center cursor-pointer text-#fff text-14"
              @click.stop="deleteVideo(item.id)"
            >
              删除
            </div>
          </div>
          <div
            class="series-video-input center column cursor-pointer"
            @click="dialogVisible = true"
          >
            <i class="el-icon-plus plus-icon"></i>
            <div class="up-text">选择关联视频</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="选择关联视频"
      :visible.sync="dialogVisible"
      width="70%"
    >
      <div class="h-560 full-w column flex-nowrap">
        <div class="full-w flex justify-between h-col-auto m-b-8">
          <div>已选择（{{ checkedList.length }}）</div>
          <div class="w-300">
            <el-input
              v-model="searchVal"
              size="small"
              placeholder="输入视频名称/描述"
              @keydown.enter.native="search"
            >
              <i
                slot="suffix"
                class="el-icon-search el-input__icon"
                @click="search"
              ></i>
            </el-input>
          </div>
        </div>
        <div class="full-w h-col overflow-auto">
          <div
            v-for="item in videoList"
            :key="item.id"
            class="video-item p-20 flex border-b border-b-#E0E0E0 full-w"
          >
            <img
              class="w-60 h-80 rd-4"
              :src="item.cover_url"
            />
            <div class="m-l-20 col column flex-nowrap justify-center">
              <div class="text-#1c1f23 text-14 line-height-16 font-600 m-b-8">
                {{ item.intro }}
              </div>
              <div class="text-#6A6B6C text-12 line-height-14">
                发布时间：{{ item.create_datetime }}
              </div>
            </div>
            <div class="m-l-20 center">
              <div
                v-if="checkedIds.includes(item.id)"
                class="cursor-pointer text-#6A6B6C text-12 line-height-14"
                title="移除添加"
                @click="checkedPush(item.id, item)"
              >
                已添加
              </div>
              <i
                v-else
                class="el-icon-plus series-icon cursor-pointer"
                @click="checkedPush(item.id, item)"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="closeDialog(false)"
        >
          取 消
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="closeDialog(true)"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <template #footer>
      <el-button
        size="small"
        :loading="loading"
        @click="cancel"
      >
        取消
      </el-button>
      <el-button
        type="primary"
        size="small"
        :loading="loading"
        @click="save"
      >
        确定
      </el-button>
    </template>
  </FormLayout>
</template>

<script>
import FormLayout from '@/components/bmp/layout/form-layout.vue'
import UpImgList from '@/components/upload/up-image-list.vue'
import { getVideoList, addSeries } from '@/api/video'
import { Loading } from 'element-ui'
export default {
  components: {
    FormLayout,
    UpImgList
  },
  data() {
    return {
      formState: {
        title: '',
        intro: '',
        icon: ''
      },
      searchVal: '',
      videoList: [],
      dataList: [],
      checkedList: [],
      showList: [],
      loading: false,
      dialogVisible: false
    }
  },
  computed: {
    checkedIds() {
      return this.checkedList.map((i) => i.id)
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getVideoList()
        .then((res) => {
          if (res && res.code === 0) {
            this.videoList = res?.data || []
            this.dataList = res?.data || []
          }
        })
        .catch(() => {
          this.$message.error('获取错误，请重试')
        })
    },
    cancel() {
      this.$router.go(-1)
    },
    setImg(e) {
      this.formState.icon = e
    },
    save() {
      if (!this.formState.title) {
        this.$message.warning('请填写合集名称')
        return
      }
      this.loading = true
      const loadingInstance = Loading.service()
      addSeries({
        ...this.formState,
        video_ids: this.showList.map((i) => i.id).join(',')
      })
        .then((res) => {
          if (res && res.code === 0) {
            this.$message.success('创建成功')
            this.$router.go(-1)
          }
        })
        .catch(() => {
          this.$message.error('创建失败请重试！')
        })
        .finally(() => {
          this.loading = false
          this.$nextTick(() => {
            loadingInstance.close()
          })
        })
    },
    closeDialog(isSave) {
      this.dialogVisible = false
      if (!isSave) {
        this.videoList = this.dataList
        this.searchVal = ''
        this.checkedList = []
      } else {
        this.showList = this.checkedList
      }
    },
    search() {
      this.videoList = this.dataList.filter((i) =>
        i.title.includes(this.searchVal)
      )
    },
    // 选择-取消选择
    checkedPush(id, e) {
      const index = this.checkedList.findIndex((i) => i.id === id)
      if (index !== -1) {
        this.checkedList.splice(index, 1)
      } else {
        this.checkedList.push(e)
      }
    },
    deleteVideo(id) {
      const index = this.showList.findIndex((i) => i.id === id)
      if (index !== -1) {
        this.checkedList.splice(index, 1)
      }
      this.checkedList = this.showList
    }
  }
}
</script>
<style lang="scss" scoped>
.series-video-input {
  width: 120px;
  height: 120px;
  background: #f4f5f9;
  border-radius: 0px 0px 0px 0px;
  border: 1px dashed #dcdcdc;
  .plus-icon {
    font-size: 28px;
    color: #1c1f23;
    width: 100%;
    font-weight: 600;
    text-align: center;
  }
  .up-text {
    margin-top: 10px;
    font-weight: 400;
    font-size: 10px;
    color: #6a6b6c;
    line-height: 12px;
  }
}
.series-video-area {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.plus-icon {
  font-size: 28px;
  color: #1c1f23;
  width: 100%;
  font-weight: 600;
  text-align: center;
}
</style>
<style lang="scss">
.series-icon {
  font-size: 24px;
  color: #1c1f23;
  width: 100%;
  font-weight: 600;
  text-align: center;
}
</style>
